import React from 'react';
import _ from 'lodash';
import { connect } from 'dva';
import RH from 'react-highcharts';
import { Table } from 'antd';
import common from '../common.less';
import Granularity from '../../../components/granularity';
import { turnNumber } from '../../../utils';

const parseChartData = (data) => {
    const res = {};
    _.forEach(data, ({ date: name, packageTotal: packages, rechargeTotal: storeValue }) => {
        if (!res.categories) {
            res.categories = [];
        }
        res.categories.push(name);
        if (!res.packages) {
            res.packages = [];
        }
        res.packages.push(turnNumber(packages));
        if (!res.storeValue) {
            res.storeValue = [];
        }
        res.storeValue.push(turnNumber(storeValue));
    });
    return res;
};

function Income({ income, dispatch }) {
    const {
        data,
        searchInfo: { type, value },
    } = income;
    const columns = [
        {
            title: '时间',
            dataIndex: 'date',
        },
        {
            title: '充值收入(元)',
            dataIndex: 'rechargeTotal',
        },
        {
            title: '套餐收入(元)',
            dataIndex: 'packageTotal',
        },
        {
            title: '小计(元)',
            render: (t, {
                rechargeTotal, packageTotal
            }) => turnNumber(rechargeTotal) + turnNumber(packageTotal),
        },
    ];
    const res = parseChartData(data);
    const config = {
        chart: {
            type: 'column'
        },
        title: { text: '收入报表' },
        credits: {
            enabled: false,
        },
        xAxis: {
            title: {
                text: '时间',
            },
            categories: res.categories,
            labels: {
                formatter() {
                    return this.value;
                }
            }
        },
        yAxis: {
            title: {
                text: '收入金额(元)',
            },
        },
        series: [
            {
                name: '畅玩套餐',
                data: res.packages
            },
            {
                name: '充值',
                data: res.storeValue
            }
        ]
    };
    const onChange = (searchInfo) => {
        dispatch({
            type: 'income/changeSearchType',
            searchInfo,
        });
    };

    return (
        <div className={common.normalWrap}>
            <div className={common.search}>
                <Granularity
                    type={type}
                    value={value}
                    onChange={onChange}
                />
            </div>
            <div className={common.table}>
                <RH config={config} />
                <Table
                    rowKey="code"
                    columns={columns}
                    dataSource={data}
                    pagination={false}
                />
            </div>
        </div>
    );
}

function mapStateToProps({ income }) {
    return { income };
}

export default connect(mapStateToProps)(Income);
